import React from 'react';
import { Carousel, Popover } from 'antd';
import { WeaNewScroll } from 'ecCom';

import './style/';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.onChange = this.onChange.bind(this);
    }

    componentWillMount() {
        const { background = {} } = this.props;
        this.setState({ ...background });
    }

    componentWillReceiveProps(nextProps) {
        const { background = {} } = nextProps;
        this.setState({ ...background });
    }

    render() {
        const background = this.state;
        const {
            type,
            color,
            opacity = 100,
            imgs = [],
            img,
            fillStyle,
            autoPlay,
            autoPlaySpeed,
            allowToChange,
            btnColor,
            video,
            videoSize,
        } = background;

        if (type === 'none') {
            return null;
        }

        let Content = null;
        if (type === 'video') {
            let o = $(window).width();
            let r = $(window).height();
            let s = o;
            let l = o * videoSize.height / videoSize.width;
            if (r > l) {
                l = r;
                s = r * videoSize.width / videoSize.height;
            }
            let p = l - r;
            let u = s - o;
            let c = -(Math.abs(p) / 2);
            let d = -(Math.abs(u) / 2);

            Content = (
                <video
                  src={video}
                  autoPlay
                  loop
                  muted
                  style={{ position: 'absolute', width: `${s}px`, height: `${l}px`, top: `${c}px`, left: `${d}px` }}
                />
            );
        } else if (type === 'img') {
            if (autoPlay) {
                Content = (
                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@7qjtb9`}
                      dots={false}
                      autoplay={autoPlay}
                      fade={true}
                      speed={1000}
                      autoplaySpeed={autoPlaySpeed * 1000}
                      initialSlide={imgs.indexOf(img)}
                    >
                        {
                            imgs.map((img, index) => {
                                if (fillStyle === 'fill' || fillStyle === 'adapt' || fillStyle === 'stretch') {
                                    return <img key={index} className="wea-portal-background-img" src={img} alt="" />;
                                }
                                    return (
                                        <div
                                          key={index}
                                          className={`wea-portal-background-img wea-portal-background-${fillStyle}`}
                                          style={{ backgroundImage: `url(${img})` }}
                                        />
                                    );
                            })
                        }
                    </Carousel>
                );
            } else if (fillStyle === 'fill' || fillStyle === 'adapt' || fillStyle === 'stretch') {
                    Content = <img className="wea-portal-background-img" src={img} alt="" />;
                } else {
                    Content = (
                        <div
                          className={`wea-portal-background-img wea-portal-background-${fillStyle}`}
                          style={{ backgroundImage: `url(${img})` }}
                        />
                    );
                }
        }

        return (
            <div className="wea-portal-background" style={{ backgroundColor: color, opacity: opacity / 100 }}>
                {Content}
                {
                    type === 'img' && allowToChange && (
                        <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@qwuwc9`}
                          trigger="click"
                          placement="topLeft"
                          content={<Backgrounds ecId={`${this && this.props && this.props.ecId || ''}_Backgrounds@fjddve`} background={background} onChange={this.onChange} />}
                        >
                            <div className="wea-portal-background-btn">
                                <i className="icon-menu-palette" style={{ color: btnColor }} />
                            </div>
                        </Popover>
                    )
                }
            </div>
        );
    }

    onChange(img) {
        const background = this.state;
        this.props.onChange({ ...background, img }, true);
    }
}

class Backgrounds extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }

    render() {
        const { background = {} } = this.props;
        const { imgs = [], img } = background;

        return (
            <div className="wea-portal-backgrounds-imgs">
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@be30ph`} height="100%">
                    {
                        imgs.map((item, index) => {
                            const selected = item === img;

                            return (
                                <div key={index} className="wea-portal-backgrounds-img">
                                    <img
                                      src={item}
                                      alt=""
                                      className={selected ? 'selected' : ''}
                                      onClick={() => this.onChange(item)}
                                    />
                                </div>
                            );
                        })
                    }
                    <div style={{ clear: 'both' }} />
                </WeaNewScroll>
            </div>
        );
    }

    onChange(img) {
        this.props.onChange(img);
    }
}

export default Index;
